前提・実現したいこと
AI音声アランのニュースアプリを作っているのですが、エラーが発生してしまいました。
完成品ではこのような画面が表示されますが、自分の方ではエラーメッセージが表示されてしまします。
発生している問題・エラーメッセージ
App.js
import React, { useState, useEffect } from 'react'; import { Typography } from '@material-ui/core'; import wordsToNumbers from 'words-to-numbers'; import alanBtn from '@alan-ai/alan-sdk-web'; import logo from './images/logo.png'; import { NewsCards, Modal } from './components'; import useStyles from './styles'; const App = () => { const [activeArticle, setActiveArticle] = useState(0); const [newsArticles, setNewsArticles] = useState([]); const [isOpen, setIsOpen] = useState(false); const classes = useStyles(); useEffect(() => { alanBtn({ key: '44c4d84f0650e0b9a6752e3e5d9862462e956eca572e1d8b807a3e2338fdd0dc/stage', onCommand: ({ command, articles, number }) => { if (command === 'newHeadlines') { setNewsArticles(articles); setActiveArticle(-1); } else if (command === 'instructions') { setIsOpen(true); } else if (command === 'highlight') { setActiveArticle((prevActiveArticle) => prevActiveArticle + 1); } else if (command === 'open') { const parsedNumber = number.length > 2 ? wordsToNumbers((number), { fuzzy: true }) : number; const article = articles[parsedNumber - 1]; if (parsedNumber > 20) { alanBtn().playText('Please try that again...'); } else if (article) { window.open(article.url, '_blank'); alanBtn().playText('Opening...'); } else { alanBtn().playText('Please try that again...'); } } }, }); }, []); return ( <div> <div className={classes.logoContainer}> {newsArticles.length ? ( <div className={classes.infoContainer}> <div className={classes.card}><Typography variant="h5" component="h2">Try saying: <br /><br />Open article number [4]</Typography></div> <div className={classes.card}><Typography variant="h5" component="h2">Try saying: <br /><br />Go back</Typography></div> </div> ) : null} <img src="https://alan.app/voice/images/previews/preview.jpg" className={classes.alanLogo} alt="logo" /> </div> <NewsCards articles={newsArticles} activeArticle={activeArticle} /> <Modal isOpen={isOpen} setIsOpen={setIsOpen} /> {!newsArticles.length ? ( <div className={classes.footer}> <Typography variant="body1" component="h2"> Created by <a className={classes.link} href="https://www.linkedin.com/in/adrian-hajdin/"> Adrian Hajdin</a> - <a className={classes.link} href="http://youtube.com/javascriptmastery"> JavaScript Mastery</a> </Typography> <img className={classes.image} src={logo} height="50px" alt="JSMastery logo" /> </div> ) : null} </div> ); }; export default App;
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
package.json
{ "name": "alan_al_news_application", "version": "0.1.0", "private": true, "dependencies": { "@alan-ai/alan-sdk-web": "^1.3.1", "@material-ui/core": "^4.11.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/react-dom": "^16.9.8", "classnames": "^2.2.6", "ejs": "^3.1.5", "module": "^1.2.5", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", "words-to-numbers": "^1.5.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@types/react": "^16.9.48" } }
補足情報(OS/GitHub/学習動画)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/18 09:02